<template>
  <div class="operate">
    <div style="" class="right">
      <div class="sous">
        <div class="sous1" @click="getshowinput">
          <i class="iconfont icon-sousuoxiao"></i>
        </div>
        <div v-if="showinput">
          <el-input size="mini" v-model="input" placeholder="请输入内容"></el-input>
        </div>
      </div>
      <div class="wenhao">
        <i class="iconfont icon-kongxinwenhao"></i>
      </div>
      <div class="information" @mouseover="tuichudengl">
        <img :src="loginfromation.avatar_url" alt="">
        <span>{{loginfromation.name}}</span>
      </div>
      <div class="tuichu" v-if="tuichushow" @mouseout="tuichudengl2" @click="gettuichu">
        <i class="el-icon-switch-button"></i>
        <span>退出登录</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Operate',
  data() {
    return {
      input: '',
      showinput: false,
      tuichushow: false
    }
  },
  computed: {
    ...mapState({
      loginfromation: state => state.login.loginfromation
    })
  },
  mounted() {
    this.getLogininformation()
  },
  methods: {
    tuichudengl() {
      this.tuichushow = true
    },
    tuichudengl2() {
      this.tuichushow = false
    },
    gettuichu() {
      localStorage.setItem('shuchotaitoken', '')
      this.$router.push('/login')
    },
    getshowinput() {
      if (this.showinput) {
        this.showinput = !this.showinput
      } else {
        this.showinput = !this.showinput
      }
    },
    getLogininformation() {
      this.$store.dispatch('getLogininformation')
    }
  }
}
</script>

<style lang="less" scoped>
.operate {
  // width: 100px;
  // background-color: red;
  height: 35px;
  border-bottom: 1px solid #d6d4d4;
  // display: flex;
  // align-items: center;
  line-height: 35px;
  background-color: #fff;
  .right {
    float: right;
    display: flex;
    .sous {
      display: flex;
      .sous1 {
        i {
          font-size: 14px;
          margin-left: 10px;
        }
      }
      .sous1:hover {
        cursor: pointer;
      }
    }

    .wenhao {
      margin-left: 10px;
      width: 30px;
      font-size: 14px;
      display: flex;
      justify-content: center;
    }
    .wenhao:hover {
      cursor: pointer;
      background-color: #f6f3f3;
    }
    .information {
      display: flex;
      align-items: center;
      margin-left: 20px;
      margin-right: 20px;
      padding-right: 10px;
      padding-left: 10px;
      img {
        width: 30px;
        height: 30px;
      }
      span {
        margin-left: 5px;
        opacity: 0.5;
      }
    }
    .information:hover {
      cursor: pointer;
      background-color: #f6f3f3;
    }
    .tuichu {
      position: absolute;
      width: 100px;
      height: 30px;
      background-color: #fff;
      left: 90%;
      top: 40px;
      box-shadow: 5px 5px 5px #efeded;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .tuichu:hover {
      cursor: pointer;
    }
  }
}
</style>